import React, { useState } from 'react';
import styled, { createGlobalStyle, ThemeProvider } from 'styled-components';
import { Routes, Route } from 'react-router-dom';
import AdminLogin from './pages/AdminLogin';
import AdminRoute from './components/AdminRoute';
import { AdminAuthProvider } from './contexts/AdminAuthContext';
import { AdminPermissionProvider } from './contexts/AdminPermissionContext';
import AdminRoutes from './routes/adminRoutes';
import { motion } from 'framer-motion';
import Header from './components/Header';
import Footer from './components/Footer';
import Navigation from './components/Navigation';
import Home from './pages/Home';
import DailyFortune from './pages/DailyFortune';
import FortuneTools from './pages/FortuneTools';
import BaziCalculator from './pages/BaziCalculator';
import TarotReading from './pages/TarotReading';
import DreamInterpreter from './pages/DreamInterpreter';
import NameAnalysis from './pages/NameAnalysis';
import NameAnalysisHistory from './pages/NameAnalysisHistory';
import MindStation from './pages/MindStation';
import Profile from './pages/Profile';
import VIP from './pages/VIP';
import Login from './pages/Login';
import Register from './pages/Register';
import ProtectedRoute from './components/ProtectedRoute';
import ShareableFortuneCard from './components/ShareableFortuneCard';
import ProxyTestPage from './ProxyTestPage';
// 新增的塔罗相关页面组件
import TarotHome from './pages/TarotHome';
import TarotQuestion from './pages/TarotQuestion';
import TarotSpread from './pages/TarotSpread';
import TarotDraw from './pages/TarotDraw';
import TarotInterpretation from './pages/TarotInterpretation';
// 解梦测试页面
import DreamTest from './DreamTest';
// 代理测试页面
import ProxyTest from './ProxyTest';
import PalmTest from './PalmTest';
import ProxyTestSimple from './ProxyTestSimple';
// 面相分析页面
import FaceAnalysis from './pages/FaceAnalysis';
// 手相分析页面
import PalmAnalysis from './pages/PalmAnalysis';
import { lightTheme, darkTheme } from './styles/themes';

const theme = {
  // 深色主题
  dark: darkTheme,
  // 浅色主题
  light: lightTheme
};

const GlobalStyle = createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    background-color: ${props => props.theme.colors.background};
    color: ${props => props.theme.colors.textPrimary};
    line-height: 1.6;
    transition: background-color 0.3s, color 0.3s;
  }

  a {
    text-decoration: none;
    color: inherit;
  }

  ul {
    list-style: none;
  }
`;

const AppContainer = styled(motion.div)`
  min-height: 100vh;
  display: flex;
  flex-direction: column;
`;

const MainContent = styled.main`
  flex: 1;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
`;

function App() {
  const [currentTheme, setCurrentTheme] = useState('dark');
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const toggleTheme = () => {
    setCurrentTheme(currentTheme === 'light' ? 'dark' : 'light');
  };

  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen);
  };

  return (
    <AdminAuthProvider>
      <AdminPermissionProvider>
        <ThemeProvider theme={theme[currentTheme]}>
          <>
            <GlobalStyle />
            <AppContainer
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 0.5 }}
            >
              {/* 只在非管理员页面显示Header和Navigation */}
              {window.location.pathname !== '/admin/login' && !window.location.pathname.startsWith('/admin/') && (
                <>
                  <Header 
                    toggleTheme={toggleTheme} 
                    theme={currentTheme}
                    toggleMenu={toggleMenu}
                    isMenuOpen={isMenuOpen}
                  />
                  <Navigation isMenuOpen={isMenuOpen} toggleMenu={toggleMenu} />
                </>
              )}
              <MainContent>
                <Routes>
              <Route path="/" element={<Home />} />
              <Route path="/daily-fortune" element={<DailyFortune />} />
              <Route path="/fortune-tools" element={<FortuneTools />} />
              <Route path="/bazi-calculator" element={<BaziCalculator />} />
              <Route path="/tools/bazi" element={<BaziCalculator />} />
              <Route path="/tools/tarot" element={<TarotReading />} />
              <Route path="/tools/dream" element={<DreamInterpreter />} />
              <Route path="/tools/name-analysis" element={<NameAnalysis />} />
              <Route path="/tools/face" element={<FaceAnalysis />} />
              <Route path="/tools/palm" element={<PalmAnalysis />} />
              {/* 新增的塔罗相关页面路由 */}
              <Route path="/tarot/home" element={<TarotHome />} />
              <Route path="/tarot/question" element={<TarotQuestion />} />
              <Route path="/tarot/spread" element={<TarotSpread />} />
              <Route path="/tarot/draw" element={<TarotDraw />} />
              <Route path="/tarot/interpretation" element={<TarotInterpretation />} />
              <Route path="/dream-interpreter" element={<DreamInterpreter />} />
              <Route path="/mind-station" element={<MindStation />} />
              <Route path="/profile" element={<ProtectedRoute><Profile /></ProtectedRoute>} />
              <Route path="/vip" element={<VIP />} />
              <Route path="/name-analysis/history" element={<ProtectedRoute><NameAnalysisHistory /></ProtectedRoute>} />
              <Route path="/login" element={<Login />} />
              <Route path="/register" element={<Register />} />
              <Route path="/shareable-card" element={<ShareableFortuneCard />} />
              <Route path="/dream-test" element={<DreamTest />} />
              <Route path="/proxy-test" element={<ProxyTestPage />} />
              <Route path="/proxy-test-simple" element={<ProxyTestSimple />} />
              <Route path="/proxy-old" element={<ProxyTest />} />
              <Route path="/palm-test" element={<PalmTest />} />
              
              {/* 管理员后台路由 */}
              <Route path="/admin/login" element={<AdminLogin />} />
              <Route path="/admin/*" element={
                <AdminRoute>
                  <AdminRoutes />
                </AdminRoute>
              } />
                </Routes>
              </MainContent>
              {/* 只在非管理员页面显示Footer */}
              {window.location.pathname !== '/admin/login' && !window.location.pathname.startsWith('/admin/') && (
                <Footer />
              )}
            </AppContainer>
          </>
        </ThemeProvider>
      </AdminPermissionProvider>
    </AdminAuthProvider>
  );
}

export default App;